<template>
  <div class="category">
    <!-- 顶部搜索 -->
    <div class="category-head">
      <router-link class="search" tag="div" to="/home/search">
        <van-icon name="search" size="16px" /> <span>商品搜索,共239款好物</span>
      </router-link>
    </div>
    <div class="main">
      <!-- 左侧导航 -->
      <div class="left">
        <div
          class="nav-item"
          v-for="(item, index) in categoryList"
          :key="item.id"
          :class="{ act: activeNavItem == index }"
          @click="handleNavItemClick(index, item.id)"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 右侧列表 -->
      <div class="right">
        <div class="banner">
          <img :src="currentCategory.banner_url" alt="" />
        </div>
        <div class="title">{{ currentCategory.name }}分类</div>
        <div class="grid">
          <router-link
            tag="div"
            class="item"
            v-for="item in currentCategory.subList"
            :key="item.id"
            :to="`/category/categorylist?id=${item.id}`"
          >
            <img :src="item.wap_banner_url" alt="" />
            <p>{{ item.name }}</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { indexaction, currentaction } from "@/api/category";
export default {
  name: "Category",
  data() {
    return {
      categoryList: [], // 分类导航列表
      activeNavItem: 0, // 被选中的导航
      currentCategory: {}, // 当前被选中分类的信息
    };
  },
  methods: {
    // 获取左侧导航列表
    async getSlideList() {
      const { categoryList } = await indexaction();
      this.categoryList = categoryList;
      this.getCategoryInfo(this.categoryList[0].id);
    },
    // 获取当前分类信息
    async getCategoryInfo(id) {
      const { data } = await currentaction({
        id,
      });
      this.currentCategory = data.currentOne;
    },
    // 导航列表点击
    handleNavItemClick(index, id) {
      this.activeNavItem = index;
      this.getCategoryInfo(id);
    },
  },
  created() {
    this.getSlideList();
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
